<template>
  <base-panel>
    <template #header>
        <h3>日降水量分析</h3>
    </template>
    <div class="chart-container" ref="chartRef"></div>
  </base-panel>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import BasePanel from '@/components/BasePanel.vue'

const chartRef = ref<HTMLElement>()
let chart: echarts.ECharts | null = null

onMounted(() => {
  if (chartRef.value) {
    chart = echarts.init(chartRef.value)
    initChart()
    window.addEventListener('resize', handleResize)
  }
})

onUnmounted(() => {
  if (chart) {
    chart.dispose()
    window.removeEventListener('resize', handleResize)
  }
})

const handleResize = () => {
  chart?.resize()
}

const initChart = () => {
  const option = {
    grid: {
      top: 20,
      right: 20,
      bottom: 20,
      left: 50,
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['10-01', '10-02', '10-03', '10-04', '10-05', '10-06'],
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        }
      },
      axisLabel: {
        color: 'rgba(255, 255, 255, 0.7)'
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      },
      axisLabel: {
        color: 'rgba(255, 255, 255, 0.7)'
      }
    },
    series: [{
      data: [20, 15, 25, 30, 12, 18],
      type: 'bar',
      barWidth: 10,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#00f2fe' },
          { offset: 1, color: '#1890ff' }
        ])
      }
    }]
  }

  chart?.setOption(option)
}
</script>

<style lang="scss" scoped>
.chart-container {
  height: 200px;
  width: 100%;
}
</style> 